/**
[1]
Icon Symbolizer: https://openlayers.org/en/latest/examples/icon.html

[2]
Icon: https://openlayers.org/en/latest/apidoc/module-ol_style_Icon-Icon.html
*/
<template>
    <div>
        <div ref="map" id="map"></div>
        <div id="anchor"><i class="el-icon-location" style="font-size: 30px;color: #1183FB;"></i></div>
    </div>
</template>

<script>
    import "ol/ol.css";
    import {Map, View, Feature, Overlay} from "ol";
    import {Vector as VectorLayer} from "ol/layer"
    import {Vector as VectorSource} from "ol/source"

    import {Tile as TileLayer} from "ol/layer"
    import {XYZ} from "ol/source"

    import {Point} from "ol/geom"
    import {fromLonLat} from "ol/proj"
    import {Icon, Style, Circle as CircleStyle, Fill, Stroke} from 'ol/style';


    export default {
        name: "AppIconSymbolizer",
        data() {
            return {
                map: null,
                highlightSource: null,
                iconSource: null,
                pointDemo: [113.399998, 34.900011],
                pointCenter: [113.299999, 34.800001]
            }
        },
        mounted() {
            // 创建地图
            this.initMap();

            this.addLayer();
            this.addIcon();
            this.addHighlightPoint();
        },

        methods: {
            /**
             * 初始化一个 openlayers 地图
             */
            initMap() {
                this.map = new Map({
                    target: "map",
                    view: new View({
                        center: fromLonLat(this.pointCenter),
                        zoom: 8,
                        constrainResolution: true,//设置缩放级别为整数
                        smoothResolutionConstraint: false,//关闭无级缩放地图
                    }),
                });

                var gaodeLayer = new TileLayer({
                    source: new XYZ({
                        url: "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
                    })
                });
                console.log('地图：', gaodeLayer);
                this.map.addLayer(gaodeLayer);

                let anchor = new Overlay({
                    element: document.getElementById('anchor')
                });
                anchor.setPosition(fromLonLat(this.pointCenter));
                this.map.addOverlay(anchor)

                this.map.getView().animate({
                    center: fromLonLat(this.pointCenter),
                    duration: 1000,
                })// 动画 将地址移动到视图中心
            },

            addLayer() {
                //添加一个图标图层
                this.iconSource = new VectorSource({wrapX: false});
                const iconLayer = new VectorLayer({
                    source: this.iconSource,
                    zIndex: 3
                });
                this.map.addLayer(iconLayer);
                //添加一个高亮图层
                this.highlightSource = new VectorSource({wrapX: false});
                const highlightLayer = new VectorLayer({
                    source: this.highlightSource,
                    style: this.createHighlightStyle(),
                    zIndex: 4
                });
                this.map.addLayer(highlightLayer);
            },

            //添加图标
            addIcon() {
                const iconFeature = new Feature({
                    geometry: new Point(fromLonLat(this.pointDemo)),
                });

                const iconStyle = new Style({
                    image: new Icon({
                        anchor: [0.5, 46],
                        anchorXUnits: 'fraction',
                        anchorYUnits: 'pixels',
                        src: require('@/assets/img/icon_car.png'),
                    }),
                });

                iconFeature.setStyle(iconStyle);
                this.iconSource.addFeature(iconFeature);
            },
            //添加高亮点
            addHighlightPoint() {
                this.highlightSource.addFeature(new Feature({
                    geometry: new Point(fromLonLat(this.pointDemo)),
                }));
            },
            //创建高亮样式
            createHighlightStyle() {
                return new Style({
                    fill: new Fill({
                        color: 'rgba(0, 255, 255, 0.2)',
                    }),
                    stroke: new Stroke({
                        color: 'rgba(0, 255, 255, 1)',
                        width: 3,
                    }),
                    image: new CircleStyle({
                        radius: 5,
                        fill: new Fill({
                            color: 'rgba(0, 255, 255, 1)',
                        }),
                    }),
                });
            },

        }
    };


</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 10px;
        left: 10px;
    }

    /*移除OSM的链接*/
    :deep(.ol-attribution) {
        display: none;
    }
</style>